<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Class</title>

    <link rel="stylesheet" href="../util/bootstrap-3.3.7-dist/css/bootstrap.css">
    <script src="../util/jquery-3.4.1.js"></script>
    <script src="../util/bootstrap-3.3.7-dist/js/bootstrap.js"></script>
    <link rel="stylesheet" href="../font/download/font_d2iixhf23ct/iconfont.css">
    <link rel="stylesheet" href="../css/THE%20CLASS.css">
 <!--   <link rel="stylesheet" href="../css/common.css">-->

</head>
<body id="wxbody">
<section id="content">

    <!-------------新增班级------------->
    <div id="head">
        <h4 class="ws1">班级管理</h4>

        <button type="button" class="btn btn-primary btn-lg zjbj1" data-toggle="modal" data-target="#myModal" style="font-size: 16px">
            <span class="glyphicon glyphicon-plus">增加班级</span>
        </button>

        <div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
            <div class="modal-dialog" role="document">
                <div class="modal-content">
                    <div class="modal-header">
                        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                        <h4 class="modal-title" id="myModalLabel">新增班级</h4>
                    </div>
                    <div class="modal-body">
                        <form class="form-horizontal">
                            <div class="form-group">
                                <label for="inputdescribe" class="col-sm-2 control-label">编号</label>
                                <div class="col-sm-10">
                                    <input type="text" class="form-control bjbh" id="inputdate" placeholder="请输入正确的三位数编号">
                                </div>
                            </div>

                            <div class="form-group">
                                <label for="inputdescribe" class="col-sm-2 control-label">班级名称</label>
                                <div class="col-sm-10">
                                    <input type="text" class="form-control bjmc" id="inputdescribe" placeholder="给班级起个好听的名称">
                                </div>
                            </div>
                            <div class="form-group">
                                <label for="inputPerson" class="col-sm-2 control-label">开班时间</label>
                                <div class="col-sm-10">
                                    <input type="text" class="form-control kbsj" id="inputPerson" placeholder="如：2019.09.10">
                                </div>
                            </div>
                            <div class="form-group">
                                <label for="inputPerson" class="col-sm-2 control-label">负责人</label>
                                <div class="col-sm-10">
                                    <input type="text" class="form-control fzr" id="inputP" placeholder="请输入联系人姓名">
                                </div>
                            </div>
                            <div class="form-group">
                                <label for="inputPerson" class="col-sm-2 control-label">规划人数</label>
                                <div class="col-sm-10">
                                    <input type="text" class="form-control bjrs" id="inputnumbber" placeholder="人数不能大于25人">
                                </div>
                            </div>

                        </form>
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-primary tjbtn" data-dismiss="modal">提交</button>
                    </div>
                </div>
            </div>
        </div>

    </div>

    <!------------------线条------------->
    <div class="wxlink"></div>




    <!------------------------下拉--------->
    <section id="xiala">
        <div class="dropdown">
            <button class="btn btn-default1 dropdown-toggle" type="button" id="dropdownMenu1" data-toggle="dropdown" >
                选择班级

            </button>
            <ul class="dropdown-menu wxa1 " >
                <li><a href="javascript:;">所有班级</a></li>
                <li role="separator" class="divider"></li>
                <li><a href="javascript:;">大班</a></li>
                <li role="separator" class="divider"></li>
                <li><a href="javascript:;">中班</a></li>
                <li role="separator" class="divider"></li>
                <li><a href="javascript:;">小班</a></li>
            </ul>
        </div>
        <!-----------搜搜框---------->
        <div id="ssdiv">
            <input  type="text" id="shuru" placeholder="输入关键词进行搜索">
            <button id="sousuo">搜索</button>
        </div>
    </section>

    <!----------表格----------->
    <section id="wxbg">
        <table class="table table-condensed table-bordered table-striped table-hover">
            <thead>
            <tr id="theader" >
                <th class="th1 "></th>
                <th class="th2">班级编号</th>
                <th class="th3">班级名称</th>
                <th class="th4">开班时间</th>
                <th class="th5">负责人</th>
                <th class="th6">班级人数</th>
                <th class="th7">操作</th>
            </tr>
            </thead>
            <tbody>


            <tr class="success">
                <td></td>
                <td>无数据请新增班级</td>
                <td>无数据请新增班级</td>
                <td>无数据请新增班级</td>
                <td>无数据请新增班级</td>
                <td>无数据请新增班级</td>
                <td>无数据请新增班级</td>

            </tr>
            </tbody>
        </table>
    </section>

    <!--------------- 全删按钮------------>
    <section id="The tail">

        <button type="button" class="btn btn-danger btn-sm qbsc" data-toggle="modal" data-target="#myModal1">&#xe62f;全删</button>
        <div class="modal fade" id="myModal1" tabindex="-1" role="dialog">
            <div class="modal-dialog modal-lg" role="document">
                <div class="modal-content">
                    <div class="modal-header ">
                        <button type="button" class="close" data-dismiss="modal" ><span aria-hidden="true">&times;</span></button>
                        <h4 class="modal-title" id="myModalLabel2">点击</h4>
                    </div>
                    <div class="modal-body">
                        是否全部删除
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-default" data-dismiss="modal">删除</button>
                        <button type="button" class="btn btn-primary" >返回</button>
                    </div>
                </div>
            </div>
        </div>

    </section>

    <!----------------------分页符-------->
    <!--<section id="wxfy">
        <nav aria-label="Page navigation" id="fyf">
            <ul class="pagination">
                <li>
                    <a href="#" aria-label="Previous">
                        <span aria-hidden="true">&laquo;</span>
                    </a>
                </li>
                <li><a href="#">1</a></li>
                <li><a href="#">2</a></li>
                <li><a href="#">3</a></li>
                <li><a href="#">4</a></li>
                <li><a href="#">5</a></li>
                <li>
                    <a href="#" aria-label="Next">
                        <span aria-hidden="true">&raquo;</span>
                    </a>
                </li>
            </ul>
        </nav>
    </section>-->
    <!--=---------s删除是否考虑----------->
    <!-- <div class="modal fade bs-example-modal-sm0 " tabindex="-1" role="dialog" >
         <div class="modal-dialog" role="document">
             <div class="modal-content bj_newcontent">
                 <div class="bj_control">
                     <div class="bj_yes" data-dismiss="modal">确认删除</div>
                     <div class="bj_no" data-dismiss="modal">考虑一下</div>
                 </div>
             </div>
         </div>
     </div>-->
</section>

<script>
    var Wbjbh=$('.bjbh');
    var Wbjmc=$('.bjmc');
    var Wkbsj=$('.kbsj');
    var Wfzr=$('.fzr');
    var Wbjrs=$('.bjrs');
    var aDd=$('.tjbtn');
    var oTable=$('table');/*前面是表格的增删改查*/

    var Wqs=$('.btn-default');/*全删*/




    /*--------新增，删除，编辑-----------*/
    var arr2=JSON.parse(localStorage.getItem('datawx')) || [];

    if(arr2.length){
        render();
    }

    function render(){
        oTable.find('tbody').html('');

        for(var i=0;i<arr2.length;i++){
            oTable.find('tbody').append('<tr class="success">\n' +
                '                <td>\n' +
                '                    <input type="radio">\n' +
                '                </td>\n' +
                '                <td>'+arr2[i].bh+'</td>\n' +
                '                <td class="name1">'+arr2[i].mc+'</td>\n' +
                '                <td class="time">'+arr2[i].sj+'</td>\n' +
                '                <td>'+arr2[i].fz+'</td>\n' +
                '                <td>'+arr2[i].rs+'</td>\n' +
                '                <td>\n' +
                '                    <button type="button" class="change btn btn-info btn-xs bgbtn icon-guanli">清空</button>\n' +
                '                    <button type="button" class="del btn btn-danger btn-xs " data-target=".bs-example-modal-sm0">&#xe62f;删除</button>\n' +
                '                </td>\n' +
                '            </tr  class="success">');
        };

        localStorage.setItem('datawx',JSON.stringify(arr2));
    }
    //添加
    aDd.click(function ass() {
        /*判断这里的val值是否为空，如数据不完整，不能添加arr*/
        if ((Wbjbh.val())==''|| Wbjmc.val()=='' || Wkbsj.val()=='' || Wfzr.val()=='' || Wbjrs.val()==''){
            alert('请完善数据');
            arr2.splice()
        }
       else if ( Wkbsj.val().indexOf('2017')<0 && Wkbsj.val().indexOf('2018')<0 && Wkbsj.val().indexOf('2019')<0) {
            alert('开班时间不正确');
            arr2.splice();
        }
       else if (Wbjrs.val()>25 || Wbjrs.val()<0){
                alert('班级人数不正确，应在25之内选择');
            arr2.splice()
        }
        else {
            arr2.unshift({
                bh:Wbjbh.val(),
                mc:Wbjmc.val(),
                sj:Wkbsj.val(),
                fz:Wfzr.val(),
                rs:Wbjrs.val()
            });
        }
        Wbjbh.val('');
        Wbjmc.val('');
        Wkbsj.val('');
        Wfzr.val('');
        Wbjrs.val('');/*点击后清除input val*/
        render();
    });
    /*删除*/
    oTable.on('click','.del',function () {
        var n=$(this).parents('tr').index();
        var t=$(this).parent().prev();
        var v=t.text();
        if (v==0){
            arr2.splice(n,1);
            render();
        } else{
            alert('人数大于零不能清空,，，请先清空后在删除')
        }/*人数大于零，不可以清空*/

        render();
    });
    /*修改*/
    oTable.on('click','.change',function () {
        var n=$(this).parents('tr').index();
        arr2.splice(n,1,{bh:'xxx',mc:'xxx',sj:'xxx',fz:'xxx',rs:0});
        render();
    })
    /*---------------全删功能--------------------------*/
    Wqs.click(function () {
        arr2.splice(0);/*删除数组*/
        render();/*再次渲染，没有数据*/
    });


    $('.dropdown').mousemove(function () {

        $(".time").each(function(){
            if($(this).text().indexOf("2018")>-1 ){
                var PP= $(this).parent();
                PP.addClass('zhongban');
            }

            if($(this).text().indexOf("2019")>-1 ){
                var PP= $(this).parent();
                PP.addClass('xiaoban');
            }
            if($(this).text().indexOf("2017")>-1 ){
                var PP= $(this).parent();
                PP.addClass('daban');
            }
        })
    });
    /* 设置鼠标移入时判断；如果.time标签的值包含2017 或则2018那么就给该标签加上对应的class名*/


    /*---------------下拉按钮----------------------*/
    $('.dropdown').on('click','li', function (e) {
        $('#dropdownMenu1').html(e.target.innerText+'<span class="caret"></span>');
        /*点击下拉菜单时，菜单输出的内容*/

        if (e.target.innerText=='大班'){
                    $('.daban').show();
                    $('.zhongban').hide();
                    $('.xiaoban').hide();
        }/*如果下拉菜单输出为大班时，那么通过classs控制大班显示，中班和小班隐藏*/

        if (e.target.innerText=='所有班级'){
            $('.daban').show();
            $('.zhongban').show();
            $('.xiaoban').show();
        }/*下拉菜单输出为所有班级时，所有都显示*/

        if (e.target.innerText=='中班'){
                    $('.zhongban').show();
                    $('.daban').hide();
                    $('.xiaoban').hide();

        }/*中班显示功能*/

        if (e.target.innerText=='小班'){
                    $('.xiaoban').show();
                    $('.daban').hide();
                    $('.zhongban').hide();
        }
    });/*小班显示*/


/*--------------搜索功能------------------*/

    $(function(){
        $("#sousuo").click(function(){
            var txt=$("#shuru").val();
            if($.trim(txt)!=""){

                $("table tr:not('#theader')").hide().filter(":contains('"+txt+"')").show()
            }else{
                $("table tr:not('#theader')").show();
            }
        });
    })
    /*-not: 从包含所有段落的集合中删除 id 为 "theader" 的段落：*/
    /*用filter返返回一个新的内容， 返回的内容为包含输入框val值得所有元素，设置为显示，更改样式*/
    /*用trim判断val不为空时的*/






</script>

</body>
</html>